<template>
  <div>
    <el-table
      :data="localTablePage?.records"
      v-bind="tableAttribute"
      v-loading="tableLoading"
      element-loading-text="拼命加载中..."
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.field"
        :label="item.label"
        v-bind="item.attribute"
      >
        <template #default="scope">
          <template v-if="item.template && item.field !== 'right'">
            <template v-if="item.template.tooltip">
              <el-tooltip
                v-if="scope.row[item.field]"
                class="box-item"
                effect="dark"
                :content="scope.row[item.field]"
                placement="top"
                v-bind="item.template.tooltip.attribute"
              >
                <span>{{
                  StringUtils.truncate(scope.row[item.field], item.template.tooltip.length, '...')
                }}</span>
              </el-tooltip>
            </template>
            <template v-if="item.template.component == ElIcon">
              <el-icon>
                <component :is="scope.row[item.field]" />
              </el-icon>
            </template>
            <template v-else-if="item.template.component">
              <!--自定义组件-->
              <component
                :is="item.template.component"
                v-bind="item.template.options(scope.row, callMethod)"
                v-model="scope.row[item.field]"
              >
                <template v-if="item.formatter">
                  {{ item.formatter ? item.formatter(scope.row) : scope.row[item.field] }}
                </template>
              </component>
            </template>
          </template>

          <template v-else-if="item.formatter">
            {{ item.formatter ? item.formatter(scope.row) : scope.row[item.field] }}
          </template>
          <template v-if="item.field === 'right' && item.template">
            <template v-for="(ele, index) in item.template.options" :key="index">
              <el-button
                v-bind="ele"
                v-if="ele.show?(typeof ele.show === 'function' ? ele.show(scope.row) : ele.show):true"
                :size="ele.size || 'default'"
                @click.stop="() => callMethod(toRaw(scope.row), ele.method)"
              >
                <template v-if="ele.label">
                  {{ ele.label }}
                </template>
                <template v-else-if="ele.formatter">
                  {{ ele.formatter ? ele.formatter(scope.row) : scope.row[item.field] }}
                </template>
              </el-button>
            </template>
          </template>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
    <div class="footer" v-if="localTablePage">
      <el-pagination
        v-model:current-page="localTablePage.current"
        v-model:page-size="localTablePage.size"
        v-bind="pageAttribute"
        :total="localTablePage.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// ----------------------------------导入区---------------------------------
import { computed, toRaw } from 'vue'
import { ElButton, ElIcon } from 'element-plus'
import type { ResultPageType, SearchPageTypes } from '@/resources/interface/ResultTypes'
import type { TableColumn } from '@/components/CommonTable.vue'
import StringUtils from '../utils/StringUtils'

// ----------------------------------数据区---------------------------------
defineProps<{
  tableColumn: TableColumn[]
  tableAttribute?: any
  pageAttribute?: any
  tableLoading?: boolean
}>()
const page = defineModel('tableData')
const localTablePage = computed<ResultPageType>(() => page.value as ResultPageType)
const pageParams = defineModel('pageParams')
const localPageParams = computed<SearchPageTypes>(() => pageParams.value as SearchPageTypes)

// ----------------------------------方法区---------------------------------
// eslint-disable-next-line vue/valid-define-emits
let emits = defineEmits()
const callMethod = (row: object, method: string) => {
  emits(method, row)
}
const handleSizeChange = (val: number) => {
  localPageParams.value.size = val
  emits('search')
}
const handleCurrentChange = (val: number) => {
  localPageParams.value.current = val
  emits('search')
}
</script>

<style scoped>
.footer {
  position: absolute;
  bottom: 1px;
  padding: 5px;
}
</style>
